// common.less

// Font Size
@font-size-normal: 1em;
@font-size-small: 0.9em;

// Colors
@text-color: rgb(200, 200, 200);
@text-color-dark: rgb(150, 150, 150);
@text-color-highlight: rgb(240, 240, 240);
@text-color-detail: rgb(100, 100, 100);

@text-color-info: #6494ed;
@text-color-success: #73c990;
@text-color-warning: #e2c08d;
@text-color-error: #fd6247;

@shadow-color: rgba(0, 0, 0, 0.2);

@background-color: rgb(40, 40, 40);
@background-color-highlight: rgba(100, 200, 255, 0.2);
@background-color-lighter: #3a3e44;
@border-color: rgb(25, 25, 25);

@bufferScrollBarSize: 7px;

@component-padding: 10px;

#host,
.editor,
.stack {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.split {
    position: relative;
    height: 100%;
}

.split-spacer {
    box-shadow: inset rgba(0, 0, 0, 0.1) 0px 0px 3px 1px;
    flex: 0 0 auto;

    &.vertical {
        height: 100%;
        width: 6px;
    }

    &.horizontal {
        width: 100%;
        height: 6px;
    }
}

// .split.focus, .editor.focus {
//     z-index: 1;
//     box-shadow: 1px 0px 8px 1px rgba(0, 0, 0, 0.1), -1px 0px 8px 1px rgba(0, 0, 0, 0.1);
// }

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: @background-color;
}

::-webkit-scrollbar {
    width: 3px;
    background-color: rgb(0, 0, 0);
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: @background-color-lighter;
}

.not-focused {
    opacity: 0.8;
}

.focused {
    opacity: 1;
}

.disable-mouse {
    pointer-events: none;
}

.enable-mouse {
    pointer-events: auto;
}

.container {
    position: relative;

    &.vertical {
        display: flex;
        flex-direction: column;
    }

    &.horizontal {
        display: flex;
        flex-direction: row;
    }

    &.full {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
    }

    &.fixed {
        flex: 0 0 auto;
    }

    &.center {
        justify-content: center;
        align-items: center;
    }
}

.box-shadow-up-inset {
    box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.2) inset;
}

.box-shadow {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.box-shadow-up {
    box-shadow: 0 -8px 20px 0 rgba(0, 0, 0, 0.2);
}

@keyframes rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

.rotate-animation {
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.fade-enter {
    opacity: 0;
    transform: translateX(3px);
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transform: translateX(0px);
    transition-property: transform opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
}

.fade-exit {
    opacity: 1;
    transform: translateX(0px);
}

.fade-exit.fade-exit-active {
    transform: translateX(-2px);
    opacity: 0;
    transition-property: transform opacity;
    transition-duration: 150ms;
    transition-timing-function: ease-in;
}
